<!--
 * @Author: Tim
 * @Date: 2020-08-27 10:23:22
 * @LastEditTime: 2020-08-27 10:53:00
 * @LastEditors: Please set LastEditors
 * @Description: 空白占位区
 * @FilePath: /afire/components/af_blank/index.vue
-->
<template>
    <view class="af-blank-view" :style="getBorderStyl" :class="externalClass">
        <!-- 分割线 -->
        <text class="line" :style="getLineStyl"></text>
    </view>
</template>

<script>
    export default {
        props: {
            externalClass: String,

            top: Number,
            left: Number,
            right: Number,
            bottom: Number,

            isLine: Boolean,

            lineColor: {
                type: String,
                default: '#E3E9F3'
            },

            isDashed: {
                type: Boolean,
                default: true
            },

            lineHeight: {
                type: Number,
                default: 1
            }
        },

        computed: {
            getBorderStyl() {
                let styl = ''
                if (this.top > 0) {
                    styl += "padding-top:" + this.top + 'rpx;';
                }

                if (this.bottom > 0) {
                    styl += "padding-bottom:" + this.bottom + "rpx;";
                }

                if (this.left > 0) {
                    styl += "padding-left:" + this.left + "rpx;";
                }

                if (this.right > 0) {
                    styl += "padding-right:" + this.right + "rpx;";
                }

                return styl;
            },

            getLineStyl() {
                let styl = '';
                if (this.isLine) {
                    let height = 1;
                    if (this.lineHeight > 1) {
                        height = this.lineHeight + 'rpx';
                    } else {
                        height = '1px';
                    }

                    let lineType = "solid";
                    if (this.isDashed) lineType = "dashed";

                    styl = `border-bottom:${height} ${lineType} ${this.lineColor}`;
                }

                return styl;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .af-blank-view {
        position: relative;
        width: 100%;
        box-sizing: border-box;
    }

    .line {
        position: relative;
        display: block;
        width: 100%;
    }
</style>